<template>
    <div id="updateChat">
        <div class="top">
            <div class="item">
                <span>编号：</span>
                <Input placeholder="编号" style="width: 300px" disabled  v-model="info.id" />
            </div>

            <div class="item">
                <span>被赞次数：</span>
                <Input placeholder="被赞次数" style="width: 300px" disabled  v-model="info.num"/>
            </div>

             <div class="item">
                <span>时间：</span>
                <Input placeholder="时间" style="width: 300px" disabled  v-model="info.time"/>
            </div>

            <div class="item updateFile">
                <span>足迹图片：</span>
                <img :src="info.img" v-if="!temp_img">
                <img :src="temp_img" v-else>
                <input type="file" class="fileClass" accept="image/jpg,image/jpeg,image/png,image/PNG" ref="imgfile" @change="changeImg($event)">
            </div>
             <div class="item">
                <span>碎言碎语：</span>
                <Input type="textarea" :rows="4" style="width: 300px"   v-model="info.text" />
            </div>

            <div class="item">
               <Button type="primary"  style="width: 150px;margin-left:93px ;" @click="save_info">确定</Button>
                <Button type="warning" style="width: 150px;margin-left:5px ;" @click = "back">返回</Button>
            </div>

        </div>

    </div>
</template>

<script>
import {details} from '@/network/allMessage/chat'
import {update_img_text} from '@/network/allMessage/chat'
export default {
    name:'updateChat',
    //注入reload
    inject:['reload'],
    data(){
        return{
            info:'',
            //临时图片的base64编码
            temp_img:'',
            nowData:{
                id:'',
                oldPath:'',
                imgFile:'',
                imgName:'',
                text:''
            }
        }
    },
    methods:{
        back(){
            this.$router.go(-1);//返回上一层
            this.reload()
        },
        save_info(){
            this.nowData.id = this.info.id
            this.nowData.text = this.info.text
            let param = new FormData() //创建form对象
            param.append('id',this.nowData.id)
            param.append('oldPath',this.nowData.oldPath)
            param.append('imgFile',this.nowData.imgFile)
            param.append('imgName',this.nowData.imgName)
            param.append('text',this.nowData.text)
            update_img_text(param).then( res => {
                //console.log(res)
                this.$Message.success('修改成功');
            }).catch(err => {
                console.log(err)
            })
        },
        changeImg(event){
            let imgFile = this.$refs.imgfile.files[0]
            if(imgFile.size > 2097152){
                //结构赋值，还原
                this.$message({
                    message: '警告，上传图片不能大于2M',
                    type: 'warning'
                })
                this.$refs.imgfile.outerHTML=this.$refs.imgfile.outerHTML
            }else{
                this.nowData.imgFile = imgFile
                //lastIndexOf()方法从后往前搜索到的第一个字符的位置(位置是以开头为初始位置)
                let startNum = this.info.img.lastIndexOf('/')
                this.nowData.imgName = this.info.img.substr(startNum + 1)
                //substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
                this.nowData.oldPath = this.info.img.substring(0,startNum)
                //console.log(this.nowData.oldPath)
                let reads = new FileReader()
                reads.readAsDataURL(imgFile)
                let that = this
                reads.onload = function(e){
                    that.temp_img = e.target.result
                }
            }
        }
    },
    created(){
        //this.$route.params.id接收传来的值
        //记录一下前端session的使用方法，因为刷新会丢失数据所以要保存一下
        if (typeof(Storage) !== "undefined") {
            //储存数据
            if(typeof(sessionStorage.getItem("id")) == "undefined"){
                //第一次进入
                sessionStorage.setItem("id",this.$route.params.id)
            }else{
                if(typeof(this.$route.params.id) !== "undefined"){
                    //如果是进入一个新的会保存上一次的id（但不是刷新）
                    sessionStorage.setItem("id",this.$route.params.id)
                }
            }
        }
        //sessionStorage.getItem("id")读取数据

        //刷新页面直接取数据sessionStorage.getItem("id")
        details(sessionStorage.getItem("id")).then( res => {
            this.info = res.data.result[0]
            // console.log(res)
        }).catch( err => {
            console.log(err)
        })
    }
}
</script>

<style lang="scss" scoped>
.item{
    margin: 10px 0;
    span{
        display: inline-block;
        width: 100px;
        font-size: 14px;
        font-weight: bold;
    }
    img{
        width: 300px;
        height: 100px;
        display: inline-block;
    }
}
.updateFile{
    position: relative;
}
.fileClass{
    display: block;
    width: 300px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 100px;
    opacity: 0;
}
</style>